<template>
  <div class="flex-column device-port">
    <!-- 顶部按钮 -->
    <div class="relative flex justify-end mb-10" style="height: 46px">
      <el-button class="back-btn" @click="$emit('goBack')">{{ $t('BACK') }}</el-button>
    </div>
    <div class="flex flex-1 h-1 overflow-hidden">
      <!-- 左边信息列 -->
      <div class="left-box">
        <div class="title">{{ $t('DEVICE_INFO') }}</div>
        <div class="content">
          <div>
            <label>{{ $t('BELONGS_REGION_STATION_NAME') }}：</label>
            {{ rowData.regionName }}
          </div>
          <div>
            <label>{{ $t('DEVICE_NAME') }}：</label>
            {{ rowData.nodeName }}
          </div>
          <div>
            <label>{{ $t('DEVICE_CODE') }}：</label>
            {{ rowData.nodeId }}
          </div>
          <div>
            <label>{{ $t('RUN_STATUS') }}：</label>
            {{ rowData.runStatus }}
          </div>
          <div>
            <label>{{ $t('ONLINE_STATUS') }}：</label>
            {{ rowData.online }}
          </div>
          <template v-if="rowData.nodeType === 'AOCC'">
            <div>
              <label>{{ $t('BATTERY_VOLTAGE') }}：</label>
              {{ $utils.handleEmpty(rowData.voltage) }} V
            </div>
            <div>
              <label>{{ $t('CURRENT_TEMPERATURE') }}：</label>
              {{ rowData.temperature || '--' }} ℃
            </div>
          </template>
        </div>
        <div v-if="selectedPort" class="title pt-20">{{ $t('SELECTED_PORTS_INFO') }}</div>
        <div v-if="selectedPort" class="content">
          <div class="mt-10">
            <label>{{ $t('BIZ_INFO') }}：</label>
            <span style="word-break: break-all">{{
              bizData ? `${bizData.bizName} (${bizData.bizId})` : ''
            }}</span>
          </div>
          <div>
            <label>{{ $t('LINK_SEGMENT_INFO') }}：</label>
            <el-tooltip v-if="routeData.length > 1" effect="dark" placement="right">
              <div slot="content">
                <div v-for="item in routeData" :key="item.segmentId" style="padding: 2px 0">
                  {{ `${item.segmentName || ''} (${item.segmentId})` }}
                </div>
              </div>
              <span style="word-break: break-all">{{
                `${routeData[0].segmentName || ''} (${routeData[0].segmentId})，${
                  routeData[1].segmentName || ''
                }...`
              }}</span>
            </el-tooltip>
            <span v-else style="word-break: break-all">
              {{
                routeData
                  .map(i => {
                    return `${i.segmentName || ''} (${i.segmentId})`
                  })
                  .join()
              }}
            </span>
          </div>
          <div class="mt-10">
            <label>{{ $t('SELECTED_PORTS') }}：</label>
            {{ selectedPort.portInfo.bizName }}
          </div>
          <div>
            <label>{{ $t('CONN_EQUIPMENT') }}：</label>
            {{
              selectedPort.linkNode
                ? getRegionName(selectedPort.linkNode.stationId) +
                  '/' +
                  selectedPort.linkNode.nodeName
                : ''
            }}
          </div>
          <div>
            <label>{{ $t('CONN_PORT') }}：</label>
            {{
              selectedPort.linkPort ? $utils.handleServiceI18n(selectedPort.linkPort.bizName) : ''
            }}
          </div>
          <div class="mt-10">
            <label>{{ $t('SELECTED_PORTS') }}：</label>
            {{ selectedPort.connPortInfo.bizName }}
          </div>
          <div>
            <label>{{ $t('CONN_EQUIPMENT') }}：</label>
            {{
              selectedPort.connLinkNode
                ? getRegionName(selectedPort.connLinkNode.stationId) +
                  '/' +
                  selectedPort.connLinkNode.nodeName
                : ''
            }}
          </div>
          <div>
            <label>{{ $t('CONN_PORT') }}：</label>
            {{
              selectedPort.connLinkPort
                ? $utils.handleServiceI18n(selectedPort.connLinkPort.bizName)
                : ''
            }}
          </div>
        </div>
      </div>
      <!-- 中间端口列 -->
      <div class="middle-box flex-1 relative flex-column w-1 mr-10">
        <div class="flex align-center mt-20 ml-10 absolute" style="z-index: 2">
          <el-button
            class="panelBtn"
            :class="panelIndex == 1 ? 'panelActive' : ''"
            @click="changePanel(1)"
          >2D</el-button>
          <el-button
            class="panelBtn"
            :class="panelIndex == 2 ? 'panelActive' : ''"
            @click="changePanel(2)"
          >3D</el-button>
          <el-button
            class="panelBtn"
            :class="panelIndex == 3 ? 'panelActive' : ''"
            @click="changePanel(3)"
          >{{ $t('PORT') }}</el-button>
        </div>
        <div v-if="panelIndex == 3" class="icons-example">
          <div class="flex align-center">
            <span class="font-small list-title">{{ $t('PORT') }}：</span>
            <div
              v-for="item in Object.keys(portStatus)"
              :key="item.name"
              class="flex-column pr-10 pl-10"
            >
              <el-image
                style="height: 24px; width: auto"
                :src="portStatus[item].img"
                fit="contain"
              />
              <span
                class="font-mini mt-5 text-color"
                style="white-space: pre;"
              >{{ portStatus[item].name }}</span>
            </div>
          </div>
          <div v-if="hasEid" class="flex align-center justify-end pt-10">
            <span class="font-small list-title">{{ $t('ELECTRONIC_TAG') }}：</span>
            <div class="flex flex-column align-center eid-status mr-5">
              <i class="tag-icon default iconfont icon-AFSweicharu" />
              <span class="tag-name">{{ $t('EID_EMPTY') }}</span>
            </div>
            <div class="flex flex-column align-center eid-status mr-5">
              <i class="tag-icon normal iconfont icon-AFSa-ziyuan73" />
              <span class="tag-name">{{ $t('EID_STATUS_BIND') }}</span>
            </div>
            <div class="flex flex-column align-center eid-status mr-5">
              <i class="tag-icon err-unplug iconfont icon-AFSshixin" />
              <span class="tag-name">{{ $t('EID_STATUS_ERR_UNPLUG') }}</span>
            </div>
            <div class="flex flex-column align-center eid-status mr-5">
              <i class="tag-icon err-insert iconfont icon-AFSshixin" />
              <span class="tag-name">{{ $t('EID_STATUS_ERR_INSERT') }}</span>
            </div>
            <div class="flex flex-column align-center eid-status mr-5">
              <i class="tag-icon damage iconfont icon-AFSshixin" />
              <span class="tag-name">{{ $t('DAMAGE') }}</span>
            </div>
            <div class="flex flex-column align-center eid-status mr-5">
              <i class="tag-icon default iconfont icon-AFSjiesuoweicharu" />
              <span class="tag-name">{{ $t('UNLOCK_NOT_INSERTED') }}</span>
            </div>
            <div class="flex flex-column align-center eid-status mr-5">
              <i class="tag-icon default iconfont icon-AFSa-ziyuan75" />
              <span class="tag-name">{{ $t('UNLOCK_INSERTED') }}</span>
            </div>
            <div class="flex flex-column align-center eid-status mr-5">
              <span class="tag-name mb-5">{{ $t('RECORDED_SOLID') }}</span>
              <span class="tag-name">{{ $t('NO_RECORD_HOLLOW') }}</span>
            </div>
          </div>
        </div>
        <template v-if="panelIndex == 2 && showImg">
          <Device3d
            ref="Device3d"
            :capacity="rowData.realModel"
            :model="curModel"
            :model-types="modelTypes"
            :face-list="faceList"
            @showPort="showPort"
          />
        </template>
        <template v-else>
          <component
            :is="deviceType"
            ref="middleBox"
            :model-type="curModel.modelType"
            :face-list="faceList"
            :row-data="rowData"
            :port-status="portStatus"
            :show-port="showImg"
            @portClick="portClick"
            @showPortTab="showPortTab"
          />
          <!-- <el-popover
        v-model="portPop"
        class="port-tooltip absolute"
        :style="popPosition"
        @mouseover.native="portPop = true"
        @mouseleave.native="portPop = false"
      >
        <slot name="content" class="flex flex-cloumn selected-port">
          <div v-show="portPop">
            端口号：<span>{{ get(selectedPortList, '[0].name', '') }}</span> |
            业务板号：<span>{{ get(selectedPortList, '[0].eidInfo.biz', '') }}</span> |
            集线器号：<span>{{ get(selectedPortList, '[0].eidInfo.hub', '') }}</span>
          </div>
          <div>电子标签信息：<span>{{
            get(selectedPortList, '[0].eidInfo.hasEid', false) ?
              get(selectedPortList, '[0].eidInfo.eid', '') : ''
          }}</span></div>
          <div>电子标签记录：<span>{{
            get(selectedPortList, '[0].eidInfo.hasPreEid', false) ?
              get(selectedPortList, '[0].eidInfo.preEid', '') : '' }}</span></div>
        </slot>
      </el-popover> -->
        </template>
      </div>
      <!-- 右边表格列 -->
      <div class="right-box flex-column relative" :class="showRight ? 'active' : ''">
        <div class="prop-btn" @click="$debounce(showRightFn)">
          <span v-if="!showRight" style="margin-left: -5px">《</span>
          <span v-else>》</span>
        </div>
        <div class="title mb-10">
          <el-button @click="refresh">{{ $t('REFRESH') }}</el-button>
        </div>
        <div class="w-430 flex-1 h-1 flex-column ">
          <div class="flex-1 h-1">
            <el-table ref="tableBox" :data="newTableList" height="100%" border>
              <template slot="empty">
                <NullData />
              </template>
              <el-table-column :label="$t('LINKING_DEVICE')">
                <el-table-column
                  :label="$t('DEVICE_NAME')"
                  prop="linkNode.nodeName"
                  width="70"
                  show-overflow-tooltip
                />
                <el-table-column
                  :label="$t('DOCKING_PORT')"
                  prop="linkPort.bizName"
                  width="70"
                  show-overflow-tooltip
                >
                  <template v-slot="scope">
                    {{ scope.row.linkPort ? $utils.handleServiceI18n(scope.row.linkPort.bizName) : '' }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column :label="rowData.nodeName" show-overflow-tooltip>
                <el-table-column
                  :label="$t('A_EEND_PORT')"
                  prop="portInfo.bizName"
                  width="70"
                  show-overflow-tooltip
                />
                <el-table-column
                  :label="$t('Z_EEND_PORT')"
                  prop="connPortInfo.bizName"
                  width="70"
                  show-overflow-tooltip
                />
              </el-table-column>
              <el-table-column :label="$t('LINKING_DEVICE')">
                <el-table-column
                  :label="$t('DOCKING_PORT')"
                  prop="connLinkPort.bizName"
                  width="70"
                  show-overflow-tooltip
                >
                  <template v-slot="scope">
                    {{
                      scope.row.connLinkPort
                        ? $utils.handleServiceI18n(scope.row.connLinkPort.bizName)
                        : ''
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('DEVICE_NAME')"
                  prop="connLinkNode.nodeName"
                  width="70"
                  show-overflow-tooltip
                />
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            class="mt-10 text-right"
            layout="sizes, prev, pager, next"
            :page-sizes="[100, 200, 300, 400, 500]"
            background
            :pager-count="5"
            :current-page="pageData.page"
            :page-size="pageData.size"
            :total="pageData.total"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import deviceStatus from '@/api/oen/DeviceStatus'
  import ClusterApi from '@/api/afs/ClusterApi'
  import topoPositionApi from '@/api/oen/TopoPositionApi'
  import LogicSegmentApi from '@/api/oen/LogicSegmentApi'
  import aoccConfigApi from '@/api/afs/AoccConfigApi'
  import { getParentsById } from '@/utils/common'
  import Model12Vue from './panelModel/Model-12'
  import Model24aVue from './panelModel/Model-24a'
  import Model48Vue from './panelModel/Model-48'
  import Model96Vue from './panelModel/Model-96'
  import Device3d from './Device3d.vue'

  export default {
    components: {
      Model12Vue,
      Model24aVue,
      Model48Vue,
      Model96Vue,
      Device3d
    },
    props: {
      rowData: {
        type: Object,
        default: () => {}
      },
      modelList: {
        type: Array,
        default: () => []
      },
      deviceTypeList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        pageData: {
          page: 1,
          size: 100,
          total: 0
        },
        newTableList: [],
        showRight: true,
        rightWidth: 'auto',
        faceList: [],
        selectedPort: null,
        bizData: null,
        routeData: [],
        panelIndex: 1,
        showImg: true, // 显示2d端口
        showPortStatus: true,
        curModel: {
          modelName: 'AFS-A-192',
          modelType: 'AFS-A-192'
        },
        hasEid: false,
        modelTypes: {
          'AFS-A-12': ['AFS-A-12', 'AI-ODF-12A'],
          'AFS-B-12': ['AFS-B-12'],
          'AFS-A-24': ['AFS-A-24', 'AI-ODF-24A'],
          'AFS-B-24': ['AFS-B-24'],
          'AFS-C-24': ['AFS-C-24'],
          'AFS-A-48': ['AFS-A-48'],
          'AFS-B-48': ['AFS-B-48'],
          'AFS-C-48': ['AFS-C-48'],
          'AFS-A-48M': [],
          'AFS-B-48M': [],
          'AFS-C-48M': [],
          'AFS-A-96': ['AFS-A-96'],
          'AFS-B-96': ['AFS-B-96'],
          'AFS-C-96': ['AFS-C-96'],
          'AFS-A-96M': ['AFS-96-mini', 'AFS-A-108', 'AFS-D-108', 'AFS-D-96'],
          'AFS-B-96M': ['AFS-B-108'],
          'AFS-C-96M': ['AFS-C-108"'],
          'AFS-A-96SL': ['AFS-A-96SL'],
          'AFS-B-96SL': ['AFS-B-96SL'],
          'AFS-A-96S': ['AFS-A-96S', 'AI-ODF-96SA'],
          'AFS-B-96S': ['AFS-B-96S'],
          'AFS-A-144': ['AFS-A-144', 'AI-ODF-144A'],
          'AFS-B-144': ['AFS-B-144', 'AI-ODF-144B'],
          'AFS-C-144': ['AFS-C-144'],
          'AFS-A-192': ['AFS-A-192'],
          'AFS-B-192': ['AFS-B-192'],
          'AFS-C-192': ['AFS-C-192'],
          'AFS-A-312': ['AFS-A-312'],
          'AFS-B-312': ['AFS-B-312'],
          'AFS-C-312': ['AFS-C-312'],
          'AOCC': ['智能光交箱'],
          'AFS-GROUP': ['光配机集群']
        } // 3d包含设备模型
      }
    },
    computed: {
      ...mapGetters(['regionTree', 'dictList', 'getTheme']),
      portStatus() {
        return {
          SELECTED: {
            img: require('@/assets/img/port_status/selected.png'),
            name: this.$t('SELECTED')
          },
          IDLE: {
            img: this.getTheme === 'dark-theme' ? require('@/assets/img/port_status/idle.png') : require('@/assets/img/port_status/light_idle.png'),
            name: this.$t('PORT_STATUS_IDLE')
          },
          CONN: {
            img: require('@/assets/img/port_status/conn.png'),
            name: this.$t('PORT_STATUS_CONN')
          },
          MAIN: {
            img: require('@/assets/img/port_status/main.png'),
            name: this.$t('SERVICE_UNAVAILABLE')
          },
          BACKUP: {
            img: require('@/assets/img/port_status/backup.png'),
            name: this.$t('PORT_STATUS_BACKUP')
          },
          OCCUPY: {
            img: require('@/assets/img/port_status/occupy.png'),
            name: this.$t('LINK_FAILURE')
          },
          DAMAGE: {
            img: require('@/assets/img/port_status/damage.png'),
            name: this.$t('PORT_STATUS_DAMAGE')
          },
          PROCESS: {
            img: require('@/assets/img/port_status/process.png'),
            name: this.$t('SERVICE_AVAILABLE')
          }
          // LOCK: {
          //   img: require('@/assets/img/port_status/lock.png'),
          //   name: this.$t('PORT_STATUS_LOCK')
          // }
        }
      },
      deviceType() {
        let deviceType = ''
        const modelData = {
          Model96Vue: ['AFS-A-96'],
          Model48Vue: ['AFS-A-48'],
          Model24aVue: ['AFS-A-24'],
          Model12Vue: ['AFS-B-24', 'AFS-A-12']
        }
        console.log(this.rowData)
        Object.keys(modelData).forEach(i => {
          if (modelData[i].includes(this.rowData.model)) {
            deviceType = i
          }
        })
        return deviceType || 'Model12Vue'
      }
    },
    created() {
      console.log(this.rowData)
      this.tableData = []
      this.getLink()
      this.setModelTypes()
    },
    beforeDestroy() {
      this.tableData = []
      this.faceList = []
      this.panelIndex = 1
    },
    methods: {
      showPortTab() {
        this.panelIndex = 3
        this.showImg = false
      },
      showPort(data) {
        this.panelIndex = 3
        this.showImg = data
        this.$nextTick(() => {
          if (this.curselectedPort) {
            this.curselectedPort.selected = false
            this.$refs.middleBox.selectedPort = this.curselectedPort
            this.$refs.middleBox.portClick(this.curselectedPort)
          }
        })
      },
      typeFn(model, keynum, index) {
        const str = model.split(' ')[1].charAt(index)
        if (Object.keys(this.modelTypes).includes(`AFS-${str}-${keynum}`)) {
          this.modelTypes[`AFS-${str}-${keynum}`].push(model)
        } else {
          this.modelTypes[`AFS-A-${keynum}`].push(model)
        }
      },
      setModelTypes() {
        this.modelList.forEach(model => {
          const typeMap = {
            'AFS12': [12, 0],
            'AFS24': [24, 0],
            'AFS192': [192, 0],
            'AFS312': [312, 0]
          }
          Object.keys(typeMap).forEach(item => {
            if (model.includes(item)) {
              this.typeFn(model, ...typeMap[item])
            }
          })

          if (model.includes('AFS48')) {
            model.includes('AFS48 M') ? this.typeFn(model, '48M', 3) : this.typeFn(model, 48, 0)
          }
          if (model.includes('AFS96')) {
            if (model.includes('AFS96 S')) {
              const regex = /(L)/
              const flag = model.match(regex)
              if (flag) { // 显示屏
                this.typeFn(model, '96SL', 3)
              } else { // 无显示屏
                this.typeFn(model, '96S', 3)
              }
            } else if (model.includes('AFS96 M')) {
              this.typeFn(model, '96M', 3)
            } else {
              this.typeFn(model, 96, 0)
            }
          }
          if (model.includes('AFS144') || model.includes('AFS148')) {
            (model.includes('AFS144 NA') || model.includes('AFS148 NA')) ? this.typeFn(model, 144, 2) : this.typeFn(model, 144, 0)
          }
          if (model.includes('AFS324')) {
            this.modelTypes[`AFS-A-312`].push(model)
          }
          if (model.includes('AOCC')) {
            this.modelTypes[`AOCC`].push(model)
          }
        })
        Object.keys(this.modelTypes).forEach(key => {
          if (this.modelTypes[key].includes(this.rowData.deviceTypeName)) {
            // 根据设备类型判断
            if (this.rowData.model) {
              this.curModel.modelName = this.rowData.model
            } else {
              this.curModel.modelName = this.rowData.deviceTypeName
            }

            this.curModel.modelType = key
          } else if (this.modelTypes[key].includes(this.rowData.model)) {
            // 根据设备型号判断
            this.curModel.modelName = this.rowData.model
            this.curModel.modelType = key
          }
        })
      },
      changePanel(type) {
        if (!this.curModel.modelType && type === 2) {
          this.$message.error(this.$t('NO_3D_MODEL'))
          return
        }
        this.panelIndex = type
        if (type === 3) {
          this.showImg = false
          this.$nextTick(() => {
            if (this.curselectedPort) {
              this.curselectedPort.selected = false
              this.$refs.middleBox.selectedPort = this.curselectedPort
              this.$refs.middleBox.portClick(this.curselectedPort)
            }
          })
          return
        }
        this.showImg = true
      },
      // 端口点击事件
      portClick(selectedPort) {
        if (
          this.selectedPort && selectedPort &&
          this.selectedPort.portInfo.portId === selectedPort.portInfo.portId
        ) {
          return
        }
        if (selectedPort) {
          this.selectedPort = this.tableData.find(
            i =>
              i.connPortId &&
              (i.connPortId === selectedPort.connPortId ||
                i.connPortId === selectedPort.portInfo.portId)
          ) || { connPortInfo: {}, ...selectedPort }
          this.getBizInfo(selectedPort)
          this.getListByParam(selectedPort)
        } else {
          this.selectedPort = selectedPort
        }
        this.curselectedPort = selectedPort
      },
      // 获取端口关联业务信息
      getBizInfo(portData) {
        this.bizData = null
        // 空闲和成端的端口不查
        if (portData.portInfo.status === 'IDLE' || portData.portInfo.status === 'CONN') return
        topoPositionApi
          .getBizByPort({
            portId: portData.portInfo.portId
          })
          .then(res => {
            this.bizData = res || null
          })
      },
      // 获取端口关联路由信息
      getListByParam(portData) {
        this.routeData = []
        LogicSegmentApi.getListByParam({ portId: portData.portInfo.portId }).then(res => {
          this.routeData = res || []
        })
      },
      // 查询区域、站点名
      getRegionName(regionId) {
        const regionList = (getParentsById(this.regionTree, regionId, 'regionId') || [])
          .reverse()
          .map(i => i.regionName)
        return regionList.join('/')
      },
      // 获取端口关联关系
      getLink() {
        if (this.rowData.nodeType === 'AOCC') {
          aoccConfigApi.getAoccTmVal({ deviceId: this.rowData.nodeId }).then(res => {
            console.log('getAoccTmVal', res)
            this.rowData.voltage = res.voltage
            this.rowData.temperature = res.temperature
          })
        }
        deviceStatus.linkInfo({ deviceId: this.rowData.nodeId }).then(async(res) => {
          let afsList = []
          if (this.rowData.nodeType === 'CLUSTER') {
            // 获取集群下面的设备信息
            const devicesList = await ClusterApi.clusterExtPort({ clusterId: this.rowData.nodeId })
            if (devicesList)afsList = devicesList.devices
          }

          // console.log('afsList-----', afsList)
          const resData = res || []
          // 1.先通过端口号排序；2.通过设备id排序
          res
            .sort((a, b) => {
              return a.portInfo.portName.localeCompare(b.portInfo.portName, 'zh-Hans-CN', {
                sensitivity: 'accent',
                numeric: true
              })
            })
            .sort((a, b) => {
              return a.portInfo.deviceId.localeCompare(b.portInfo.deviceId, 'zh-Hans-CN', {
                sensitivity: 'accent',
                numeric: true
              })
            })
          const faceList = []
          const tableData = []
          let deviceName = this.rowData.nodeName
          resData.forEach(i => {
            i.selected = false
            i.ediIcon = []
            // if (i.portInfo.hasEid) {
            //   this.hasEid = true
            // }
            if (i.eidPort) {
              this.hasEid = true
              const state = i.eidPort.state ? i.eidPort.state.toLowerCase() : 'default'
              const hasEid = [...new Set(i.eidPort.eid)].join() !== '0'
              const hasPreEid = [...new Set(i.eidPort.preEid)].join() !== '0'
              i.eidPort = {
                ...i.eidPort,
                eid: hasEid ? i.eidPort.eid : '',
                preEid: hasPreEid ? i.eidPort.preEid : ''
              }
              i.ediIcon = this.getPortIcon({
                ...i.eidPort,
                hasEid: hasEid,
                hasPreEid: hasPreEid,
                state: state
              })
            }
            if (!tableData.some(j => j.connPortId === i.portInfo.portId)) {
              const connPort = resData.find(z => z.portInfo.portId === i.connPortId) || {}
              // 集群端口号带上设备id
              if (this.rowData.nodeType !== 'AFS') {
                i.portInfo.bizName = i.portInfo.deviceId + '-' + i.portInfo.bizName
                if (connPort.portInfo) {
                  connPort.portInfo.bizName =
                    connPort.portInfo.deviceId + '-' + connPort.portInfo.bizName
                }
              }
              tableData.push({
                ...i,
                connPortInfo: connPort.portInfo || {},
                connLinkNode: connPort.linkNode,
                connLinkPort: connPort.linkPort
              })
            }
            const partId = i.portInfo.deviceId + i.portInfo.partFlag
            const faceData = faceList.find(j => j.partId === partId)
            if (faceData) {
              faceData.portList.push(i)
            } else {
              if (afsList.length) {
                // 给集群下面的设备展示对应名称
                const device = afsList.find(item => i.portInfo.deviceId === item.deviceId)
                if (device) {
                  deviceName = device.cabinetName + '-' + device.deviceName
                }
              }
              faceList.push({
                deviceName,
                deviceId: i.portInfo.deviceId,
                partId: partId,
                partFlag: i.portInfo.partFlag,
                portList: [i]
              })
            }
          })
          const afsids = afsList.map(item => item.deviceId)
          faceList.sort((a, b) => {
            const indexA = afsids.indexOf(a.deviceId)
            const indexB = afsids.indexOf(b.deviceId)
            if (indexA === indexB) {
              return 0
            }
            // 如果indexA < indexB，则a应该排在b前面
            if (indexA < indexB) {
              return -1
            }
            // 否则，b应该排在a前面
            return 1
          })
          // console.log('faceList-------', faceList)
          this.faceList = faceList
          this.tableData = tableData
          this.newTableList = tableData.slice(0, this.pageData.page * this.pageData.size)
          this.pageData.total = tableData.length
          console.log('this.faceList', this.faceList)
        })
      },
      getPortIcon(eidInfo) {
        // console.log('getPortIcon', eidInfo)
        const { state, damage, hasEid, hasPreEid } = eidInfo
        let classList = ['iconfont']
        // 图标
        if (state === 'unbind' || state === 'err_unplug') {
          classList = classList.concat(this.unbind(hasEid, hasPreEid))
        } else if (state === 'bind' || state === 'err_insert') {
          classList = classList.concat(this.bind(hasEid, hasPreEid))
        }
        // 颜色
        if (damage) {
          classList.push('damage')
        } else if (state === 'bind' && hasEid) {
          classList.push('bind')
        } else if (state === 'err_insert') {
          classList.push('err_insert')
        } else if (state === 'err_unplug') {
          classList.push('err_unplug')
        } else {
          classList.push('default')
        }
        return classList
      },
      unbind(hasEid, hasPreEid) {
        const classList = []
        if (hasEid && hasPreEid) {
          classList.push('icon-AFSa-ziyuan74') // 解锁已插入有记录
        } else if (hasEid && !hasPreEid) {
          classList.push('icon-AFSa-ziyuan75') // 解锁已插入无记录
        } else if (!hasEid && hasPreEid) {
          classList.push('icon-AFSjiesuoyicharu') // 解锁未插入有记录
        } else {
          classList.push('icon-AFSjiesuoweicharu') // 解锁未插入无记录
        }
        return classList
      },
      bind(hasEid, hasPreEid) {
        const classList = []
        if (hasEid && hasPreEid) {
          classList.push('icon-AFSa-ziyuan73') // 锁定已插入有记录
        } else if (hasEid && !hasPreEid) {
          classList.push('icon-AFSa-ziyuan72') // 锁定已插入无记录
        } else if (!hasEid && hasPreEid) {
          classList.push('icon-AFSshixin') // 锁定未插入有记录
        } else {
          classList.push('icon-AFSweicharu') // 锁定未插入无记录
        }
        return classList
      },
      // 点击右侧表格
      showRightFn() {
        this.showRight = !this.showRight
        setTimeout(() => {
          this.$refs.Device3d && this.$refs.Device3d.changeSize()
        }, 500)
      },
      refresh() {
        this.getLink()
        this.selectedPort = null
        this.curselectedPort = null
        this.bizData = null
        this.routeData = []
        if (this.$refs.middleBox) {
          this.$refs.middleBox.selectedPort = {}
          this.$refs.middleBox.portClick(this.selectedPort)
        }
      },
      sizeChange(size) {
        this.pageData.page = 1
        this.pageData.size = size
        this.newTableList = this.tableData.slice(0, this.pageData.page * size)
      },
      currentChange(page) {
        this.pageData.page = page
        this.newTableList = this.tableData.slice((page - 1) * this.pageData.size, this.pageData.page * this.pageData.size)
      }
    }
  }
</script>

<style lang="scss">
  @import '@/assets/css/mixin.module';
  .device-port {
    .loadmore{
      height: 10px;
    }
    .port-order {
      width: 70px;
      // white-space: nowrap;
      white-space: pre;
    }

    .left-box {
      width: 330px;
      min-width: 330px;
      height: 100%;
      overflow-y: auto;
      padding: 0 10px 10px;
      font-size: 14px;
      border-radius: 8px;
      @include themeify {
        border: 1px solid themed('tableBorderColor');
      }

      .title {
        font-size: 16px;
        margin-top: 5px;
        font-weight: 600;
        line-height: 36px;
        @include themeify {
          color: themed('textColor');
          border-bottom: 1px solid themed('tableBorderColor');
        }
      }
      .content {
        line-height: 20px;
        @include themeify {
          color: themed('textColor');
        }
        & > div {
          margin-top: 5px;

          &.mt-10 {
            margin-top: 15px;
          }
        }
        label {
          font-weight: 600;
        }
      }
    }
    .right-box {
      width: 0px;
      height: 100%;
      font-size: 14px;
      border-radius: 8px;
      transition: all 0.5s ease;
      // transform: translateX(450px);
      border: none;
      .w-430{
        width: 430px;
      }
      &.active {
        // transform: translateX(0);
        width: 450px;
        padding: 0 10px 10px;
        @include themeify {
          border: 1px solid themed('tableBorderColor');
        }
      }

      .title {
        padding: 10px;
        @include themeify {
          color: themed('textColor');
          border-bottom: 1px solid themed('tableBorderColor');
        }
      }
      .el-table th.el-table__cell > .cell {
        padding-right: 5px;
        padding-left: 5px;
      }

      .prop-btn {
        position: absolute;
        left: -10px;
        top: 50%;
        margin-top: -50px;
        width: 10px;
        height: 100px;
        font-size: 12px;
        line-height: 100px;
        text-align: center;
        @include themeify {
          color: themed('textColor');
          border: 1px solid themed('tableBorderColor');
        }
        border-radius: 30px 0 0 30px;
        cursor: pointer;
      }
      .el-pagination{
        padding:2px 0;
      }
      .el-pagination__sizes{
        margin-right: 2px;
      }
      .el-pagination.is-background .btn-next,
      .el-pagination.is-background .btn-prev,
      .el-pagination.is-background .el-pager li{
        margin:0 2px;
      }
    }

    .middle-box {
      .background-image {
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 533px auto;
      }
      .panelActive {
        @include themeify {
          color: themed("btnFontColor");
          background: linear-gradient(
            themed('mainColor'),
            themed('mainColor'),
            themed('mainColor')
          );
        }
      }
      .port-box {
        h3 {
          text-align: center;
          line-height: 40px;
          @include themeify {
            color: themed('textColor');
          }
        }
        .port-group {
          // height: 1px;
          overflow-y: auto;

          &-name {
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            @include themeify {
              color: themed('textColor');
            }
          }
        }
        .port-img {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 16px;
          height: 24px;

          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }

          .iconfont {
            margin-top: 5px;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }

      .border-box {
        padding: 10px 10px 15px 10px;
        border-radius: 5px;
        @include themeify {
          border: 1px solid themed('textColor');
        }
      }
    }
    .icons-example {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding-right: 20px;

      .w-500 {
        width: 520px;

        .font-small {
          width: 80px;
          text-align: right;
        }
      }
    }
    .list-title {
      // white-space: nowrap;
      white-space: pre;
      @include themeify {
        color: themed('homeTooltipTextColor');
      }
    }
    // 电子标签状态
    .tag-icon {
      margin-bottom: 5px;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
    }

    .tag-icon.default,
    .unbind.iconfont,
    .iconfont.default {
      color: #6ec2ff;
    }
    .tag-icon.normal,
    .bind.iconfont {
      color: #2cc974;
    }
    .tag-icon.err-unplug,
    .err_unplug.iconfont {
      color: #f9d828;
    }
    .tag-icon.err-insert,
    .err_insert.iconfont {
      color: #f16212;
    }
    .tag-icon.damage,
    .damage.iconfont {
      color: #d90c0c;
    }
    .tag-name {
      font-size: 12px;
      display: inline-block;
      @include themeify {
        color: themed('textColor');
      }
    }
  }
</style>
